@for (item of comments; track item; let i = $index; let isLast = $last) {
  <div class="item p-y-sm p-x-sm">
    <a class="anchor" [id]="'q-' + item.id"></a>
    <div class="comment-box">
      <app-media-object [content]="item.author" />
      @if (onShow(item)) {
        <div class="comment-body mt-3" [innerHTML]="item.content | safeHtml"></div>
        @if (content.comment) {
          @if (showActions && item.level === 1) {
            <app-comment-actions
              [config]="content.comment"
              [item]="item"
              [i]="i"
              [currentId]="currentId"
              [loading]="loading"
              (update)="onUpdate($event)"
              (delete)="onDelete($event)"
              (reply)="onReply($event)"
            />
          }
        }
      }
    </div>
    @if (item.id === currentId) {
      <div class="inline-editor p-y-sm p-x-sm m-bottom">
        <app-comment-form
          [content]="content"
          (cancel)="onCancel()"
          [commentContent]="currentData"
          [commentId]="item.id"
          [type]="type"
        />
      </div>
    }
    @if (item?.child && item?.child?.length) {
      <div class="item-child m-y-xs">
        <app-comment-item [comments]="item.child" [content]="content" />
      </div>
    }
  </div>
}
